<template>
  <div
    class="swiper-container"
    :style="{ height: height + 'px' }"
    ref="swiper-container"
  >
    <div class="swiper-wrapper">
      <!-- 插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 引入swiper支持的css
import "swiper/swiper-bundle.min.css";
// 引入js
import Swiper from "swiper";
export default {
  data() {
    return {
      mySwiper: null,
    };
  },
  props: {
    preview: {
      type: Number,
      default: 1,
    },
    height: {
      type: Number,
    //   default: 300,
    },
  },
  mounted() {
    // 钩子函数
    // 当所有的异步操作完毕后，进行，此时就可以得到真实的dom
    this.$nextTick(() => {
      this.mySwiper = new Swiper(this.$refs["swiper-container"], {
        // direction: "vertical", // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView: this.preview,
      });
    });
  },
  beforeDestroy() {
    this.mySwiper = null;
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
}
</style>
